<#include "../_inc/_layout.html"/>
<#macro script>
	var data = {
		url: '',
		alt: ''
	};

	function doUpload(btn) {
		layer.open({
			type: 2,
			title: '选择图片',
			shadeClose: true,
			shade: 0.8,
			area: ['92%', '90%'],
			content: '${CPATH}/admin/attachment/choose_layer?mime=image',
			end: function() {
				if ('' != data.url && null != data.url) {
					$(btn).parents("ul").find("img").attr("src", data.url);
					$(btn).parents("ul").find("input[type='hidden']").attr("value", data.url);
					$(btn).text("编辑");
				}
			}
		});
	}

	function delUpload(btn) {
		var ul = $(btn).parents("ul");
		var upload = ul.parent().attr("id");
		var index = 0;
		if(ul.siblings().length > 0){
			$.each(ul.siblings(), function(){
				$(this).find("input").each(function(){
					var name = $(this).attr("name");
					var suffix = name.substring(name.lastIndexOf("_"));
					$(this).attr("name", "meta_" + upload + index + suffix);
				});
				index ++;
			});
			ul.remove();
		}else{
			resetUpload($(btn).parents("ul"));
		}
	}

	function cloneUpload(upload) {
		var id = upload.substring(1);
		var index = $(upload).find("ul").length;
		var html = $(upload).find("ul:first").prop("outerHTML").replace(new RegExp(id + "0", "g"), id + index);
		$(html).appendTo(upload);
		resetUpload($(upload).find("ul:last"));
	}

	function clearUpload(upload) {
		resetUpload($(upload).find("ul:first"));
		$(upload).find("ul:not(':first')").remove();
	}

	function resetUpload(item) {
		item.find("img").attr("src", "${CPATH+'/static/jpress/admin/image/upload.jpg'}");
		item.find("input").val("");
	}

	function deleteAll(id) {
		if(confirm("确定清空吗？")){
			$.post("${CPATH}/admin/template/doClearBanners?ucode=${ucode}&id="+id, function(result){
				if(result.errorCode > 0){
					alert(result.message);
				}else{
					location.reload();
				}
			});
		}
	}

	function doSubmit() {
		$("#bannerForm").ajaxSubmit({
			type: "post",
			dataType: "json",
			success: function(data) {
				if (data.errorCode > 0) {
					alert(data.message);
				} else {
					location.reload();
				}
			},
			error: function() {
				alert("信息提交错误");
			}
		});
	}

</#macro>
<@layout active_id=p child_active_id=c>
<section class="content-header">
	<h1>
		首页banner图设置
	</h1>
</section>
<section class="content" style="padding-top: 0">
	<div class="row">
		<div class="col-md-12">
			<form action="${CPATH}/admin/template/doSaveBanners?m=${m!}&t=${t!}" method="POST" id="bannerForm">
				<input type="hidden" name="ucode" value="${ucode}">

				<div class="row">
		            <div class="form-horizontal">
			            <div class="col-md-11">
							<div class="form-group">
			                    <label class="col-sm-2 control-label"></label>
			                    <div class="col-sm-10">
			                        <div class="box box-solid">
			                            <div class="box-header">
			                                <h3 class="box-title"></h3>
			                                <div class="box-tools">
			                                    <button type="button" class="btn btn-sm" onclick="cloneUpload('#index_banner');">新增</button>
			                                    <button type="button" class="btn btn-sm" onclick="clearUpload('#index_banner');">重置</button>
												<button type="button" class="btn btn-sm" onclick="deleteAll('1');">清空</button>
			                                    <button type="button" class="btn btn-box-tool" data-widget="collapse">
			                                        <i class="fa fa-minus"></i>
			                                    </button>
			                                </div>
			                            </div>
			                            <div id="index_banner" class="box-body no-padding">
			                                <#if metadataSize gt 0>
			                                	<#list 0..metadataSize as i>	                                		
				                                	<#if metadata.metadataOfIndexBanner('index_banner','index_banner' + i + '_img') ??>
					                                	<ul class="nav" style="text-align:center;">
								                            <li class="jp-borde-top">
									                            <div class="jp-content-thumbnail-box">
									                            	<img style="margin:5px auto;" src="${(metadata.metadataOfIndexBanner('index_banner','index_banner' + i + '_img'))!!}" class="jp-content-thumbnail"/>
									                            	<input type="hidden" name="${'meta_index_banner' + i + '_img'}" value="${(metadata.metadataOfIndexBanner('index_banner','index_banner' + i + '_img'))!!}">
									                            	<input type="text" class="form-control" style="margin:10px auto;width:98%;" name="${'meta_index_banner' + i + '_remark'}" value="${(metadata.metadataOfIndexBanner('index_banner','index_banner' + i + '_remark'))!!}" placeholder="请输入图片描述（这里是图片alt的内容），每新增一张图片均需添加描述">
			                                            			<input type="text" class="form-control" style="margin:10px auto;width:98%;" name="${'meta_index_banner' + i + '_url'}" value="${(metadata.metadataOfIndexBanner('index_banner','index_banner' + i + '_url'))!!}" placeholder="请输入图片url">
									                        	</div>
								                            	<div class="clr"></div>
								                            </li>
								                            <li class="jp-release-set">
								                            	<button type="button" class="btn  btn-sm" onclick="doUpload(this)">上传</button>
								                            	<button type="button" class="btn  btn-sm" onclick="delUpload(this)">删除</button>
								                            	<div class="clr"></div>
								                            </li>
							                            </ul>
				                                	<#else>
			                                            <#break/>
				                                	</#if>                                           
			                                	</#list>	
			                                <#else>
			                                    <ul class="nav" style="text-align:center;">
			                                        <li class="jp-borde-top">
			                                            <div class="jp-content-thumbnail-box">
			                                                <img style="margin:5px auto;" src="${CPATH+'/static/jpress/admin/image/upload.jpg'}" class="jp-content-thumbnail"/>
			                                                <input type="hidden" name="meta_index_banner0_img">
			                                                <input type="text" class="form-control" style="margin:10px auto;width:98%;" name="meta_index_banner0_remark" placeholder="请输入图片描述（这里是图片alt的内容），每新增一张图片均需添加描述">
			                                            	<input type="text" class="form-control" style="margin:10px auto;width:98%;" name="meta_index_banner0_url" placeholder="请输入图片url">
			                                            </div>
			                                            <div class="clr"></div>
			                                        </li>		                                        
			                                        <li class="jp-release-set">
			                                            <button type="button" class="btn  btn-sm" onclick="doUpload(this)">上传</button>
			                                            <button type="button" class="btn  btn-sm" onclick="delUpload(this)">删除</button>
			                                            <div class="clr"></div>
			                                        </li>
			                                    </ul>
			                                </#if>
			                            </div>
			                        </div>
			                    </div>
			                </div>
			                <div class="form-group">
			                    <div style="text-align:center;">
			                        <button type="button" onclick="doSubmit()" class="btn btn-primary">保 存</button>
			                    </div>
			                </div>
						</div>
					</div>
				</div>

			</form>
			<!-- /.box -->
		</div>
	</div>
</section>
</@layout>